<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>知识分类列表</h2>
            <span @click="addBtnClickEvent" class='u-title-btn'>添加</span>
        </div>
        <el-table
            :data="knowledgeTypeList"
            border
            style="width: 100%">
            <el-table-column prop="name" label="分类名称" width="120"></el-table-column>
            <el-table-column prop="remark" label="备注" width="180"></el-table-column>
            <el-table-column prop="manage" label="操作">
                <template slot-scope="scope">
                    <span @click="editBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>编辑</span>
                    <span @click="deleteBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="30%">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="分类名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">立即创建</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'KnowledgeClassify',
  data() {
    return {
      dialogTitle: '新增分类',
      dialogVisible: false,
      form: {
        name: '',
        remark: '',
      },
      id: null,   // 编辑分类的id 
      isDelete: 0,  // 是否删除 1是0否
      knowledgeTypeList: []
    }
  },
  mounted() {

  },
  created: function() {
    this.getList();
  },
  methods: {
    submit() {
      console.log('this.form::', this.form);
      if(this._utils.isEmpty(this.form.name)) {
        this.$message.warning('请填写分类名称！');
        return;
      }
      if(this._utils.isEmpty(this.form.remark)) {
        this.$message.warning('请填写备注！');
        return;
      }
      this.handleKnowledgeType();
    },
    // 添加按钮点击事件
    addBtnClickEvent() {
      this.dialogVisible = true;
      this.dialogTitle = '新增分类';
      this.id = null;
      this.form.name = '';
      this.form.remark = '';
      this.isDelete = 0;
    },
    // 编辑按钮点击事件
    editBtnClickEvent(knowledgeType) {
      this.dialogVisible = true;
      this.dialogTitle = '编辑分类';
      this.form.name = knowledgeType.name;
      this.form.remark = knowledgeType.remark;
      this.id = knowledgeType.id;
      this.isDelete = knowledgeType.isDelete;
    },
    // 获取知识分类列表
    getList() {
      this.$store.dispatch('GET_KNOWLEDGE_tYPE_LIST').then(res => {
        if(res.data.retCode == 0) {
          this.knowledgeTypeList = res.data.data;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 删除按钮点击事件
    deleteBtnClickEvent(knowledgeType) {
      this.$confirm('确定删除该分类？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.id = knowledgeType.id;
        this.isDelete = 1;
        this.handleKnowledgeType()
      })
    },

    // 法律知识-新建/更新/删除知识类型
    handleKnowledgeType() {
      this.$store.dispatch('HANDLE_KNOWLEDGE_TYPE', {
        id: this.id,
        name: this.form.name,
        isDelete: this.isDelete,
        remark: this.form.remark
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('成功！');
          this.getList();
          this.dialogVisible = false;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    } 

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upload-tip{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 24px;
}

.container{
  width: 800px;
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 90px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.item>label::before{
    content: '*';
    line-height: 40px;
    color: red;
    margin-right: 5px;
}
.item-right{
    width: 600px
}
.btn-box{
    padding-left: 90px;
}
</style>
